<template>
  <div>
    <el-card class="proCard">
      <el-steps :active="active" align-center finish-status="success">
        <el-step title="填写商品信息" />
        <el-step title="填写商品促销" />
        <el-step title="填写商品属性" />
        <el-step title="选择商品关联" />
      </el-steps>
      <div class="list">
        <div>
          <el-form-item label="商品分类" prop="name">
            <el-cascader v-model="productCategoryId" :options="Category" @change="handleChange" placeholder="请选择" />
          </el-form-item>
          <el-form-item label="商品名称" prop="region">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="副标题" prop="region">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品品牌 ">
            <el-cascader v-model="productCategoryId" :options="Category" @change="handleChange" placeholder="请选择品牌" />
          </el-form-item>
          <el-form-item label="商品介绍" prop="delivery">
            <el-input type="textarea" row="5" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="商品货号" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品售价" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="市场价" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品库存" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="计量单位" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item label="商品重量" prop="delivery">
            <el-input style="width:300px;margin-right: 30px;"></el-input> <span>克</span>
          </el-form-item>
          <el-form-item label="排序" prop="delivery">
            <el-input></el-input>
          </el-form-item>
          <el-form-item prop="delivery">
            <el-button type="primary" style="margin:30px auto 0;">下一步，填写商品促销</el-button>
          </el-form-item>
        </div>
      </div>
    </el-card>
  </div>
</template>
  
<script setup lang='ts'>
import { reactive, ref } from 'vue'
import * as http from '@/request/api'

const productCategoryId = ref('')//商品分类
// 商品分类
interface ICategory {
  value: string,
  label: string,
  children: {}[],
}
const Category = reactive<ICategory[]>([])


const active = ref(2)

// 处理商品分类
try {
  let ProductCategoryListRes = await http.product.ProductCategoryListwithChildren()
  if (ProductCategoryListRes.code === 200) {
    // Category.splice(0, Category.length)
    ProductCategoryListRes.data.map((item: ICategoryChildrenRse, index: number) => {
      Category.push({ value: item.name, label: item.name, children: [] })
      item.children.map(el => {
        Category[index].children.push({ value: el.name, label: item.name })
      })
    })
  }
} catch (err) {
  console.log('获取数据失败');
}

function handleChange() { }
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  value: `${idx + 1}`,
  label: `${idx + 1}`,
}))
</script>
  
<style scoped>
.proCard {
  margin: 20px auto;
  width: 900px;
  padding-top: 30px;
}

.list {
  margin: 50px;
  width: 70%;
}
</style>